import React, { Component } from "react";

class Form extends Component {
  state = {
    value: "",
  };

  handleChange = (event) => {
    this.setState({
      value: event.target.value,
    });
  };

  add = () => {
    // console.log(this.state.value);
    this.props.onAdd(this.state.value);
    this.setState({
      value: "",
    });
  };

  keyup = (e) => {
    // console.log(e.keyCode);
    if (e.key === "Enter") {
      this.props.onAdd(this.state.value);
      this.setState({
        value: "",
      });
    }
  };

  render() {
    const { value } = this.state;
    return (
      <>
        <input
          type="text"
          value={value}
          onChange={this.handleChange}
          onKeyUp={this.keyup}
        />
        <button onClick={this.add}>添加</button>
      </>
    );
  }
}

export default Form;
